<template>
  <div class="box">
    <div class="main">
      <h1>用户协议与隐私政策</h1>
      <div class="span">
        <span
          >感谢您使用本软件!我们非常重视您的隐私保护和个人信息保护，为帮助您安全使用产品和服务，请必仔细阅读并透彻理解《用户协议》及《隐私政策》所述内容。如您同意以上条款，请点击“同意”，以便为您提供更好的服务。</span
        >
      </div>

      <div class="box1" v-show="btn1">
        <button>暂不使用</button>
        <button @click="isShowBtn2">同意</button>
      </div>
      <!-- <div class="box2" :info="btn2" v-show="btn2">
        <button @click="subInfo">确定2</button>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btn1: true,
      btn2: false,
    };
  },
  methods: {
    isShowBtn2() {
      // this.btn1 = false;
      // this.btn2 = true;
      this.$router.push({ path: "tips2" });
    },
    subInfo() {
      this.$emit("info", this.btn2);
    },
  },
};
</script>

<style scoped>
.box {
  width: 375px;
  height: 734px;
  position: relative;
  /* background: rgb(171, 109, 215); */
  display: block;
}
.main {
  width: 324px;
  /* width: 172px; */
  height: 373px;
  border-radius: 17px;
  /* height: 185px; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* background: red; */
  text-align: center;
}
.main h1 {
  width: 324px;
  height: 109px;
  line-height: 109px;
  font-size: 20px;
  background: #bbb;
  color: #101010;
}
.main .span {
  margin-left: 26.5px;
  margin-top: 15px;
  width: 271px;
  height: 154px;
  /* line-height: 154px; */
  text-align: left;
  font-size: 12px;
  color: #888;
}
.main .span span {
  font-weight: normal;
}
.box1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  font-size: 14px;
}
.box1 button {
  width: 123px;
  height: 44px;
}
</style>
